<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>我的成绩</el-breadcrumb-item>
        </el-breadcrumb>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程成绩" name="first">
                <el-table label="成绩表1" name="table1" default-active="first"
                          :data="tableData"
                          border
                          stripe true
                          style="width: 100%">
                    <el-table-column
                            fixed
                            prop="name"
                            label="课程名称"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="课程类别"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="date1"
                            label="学期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="date2"
                            label="学年"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="credit"
                            label="学分"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="method"
                            label="考核方式"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="teacher"
                            label="任课教师"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="成绩">
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="学分要求表" name="transcriptType">
                <el-table
                        :data="statistics"
                        stripe true
                        style="width: 35%; margin: 0 auto;">
                    <el-table-column
                            prop="type"
                            label="学分类别"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="need"
                            label="要求"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="score"
                            label="已修学分">
                    </el-table-column>
                </el-table>
            </el-tab-pane>


        </el-tabs>
    </div>

</template>
<script>
export default {
    data() {
        return {
            activeName: 'first',
            tableData2: [{
                type: '专业选修',
                need: 8,
                score: 0//数据库计算
            }, {
                type: '专业必修',
                need: 8,
                score: 0//数据库计算
            }, {
                type: '学位基础',
                need: 6,
                score: 0//数据库计算
            }],
            tableData: [{
                name: '计算机体系结构',
                type: '专业选修',
                credit: 3,
                date1: '22年秋',
                date2: '2022-2023学年',
                method: '大作业',
                teacher: 'Teacher 1',
                score: 0
            }, {
                name: '软件架构设计',
                type: '专业选修',
                credit: 3,
                date1: '22年秋',
                date2: '2022-2023学年',
                method: '大作业',
                teacher: 'Teacher 1',
                score: 0
            }, {
                name: '专业英语',
                type: '专业选修',
                credit: 3,
                date1: '22年秋',
                date2: '2022-2023学年',
                method: '论文汇报',
                teacher: 'Teacher 1',
                score: 0
            }, {
                name: '云计算技术',
                type: '专业选修',
                credit: 3,
                date1: '22年秋',
                date2: '2022-2023学年',
                method: '论文汇报',
                teacher: 'Teacher 1',
                score: 0
            }, {
                name: '大数据技术',
                type: '专业选修',
                credit: 3,
                date1: '22年秋',
                date2: '2022-2023学年',
                method: '线上考试',
                teacher: 'Teacher 1',
                score: 0
            }]
        };
    },
    computed: {
        statistics() {
            const data = this.tableData2.map((item) => {
                return {
                    ...item,
                    score: this.getTotalCreditsByType(item.type)
                }
            })
            return Object.values(data);
        }

    },
    methods: {
        getTotalCreditsByType(type) {
            return this.tableData
                .filter((course) => course.type === type)
                .reduce((total, course) => total + course.credit, 0)
        },

        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
};
</script>

<style scoped>

</style>